<html>
<head>
<style  type="text/css" >
strong {color: red;}
h2 {color: red;}
h2 strong {color: blue;}

li strong {
    font-style: italic;
    font-weight: normal;
  }
  
 #red{color:red}
 #green{color:green}
 
 #sidebar p{
	font-style:italic;
	text-align:right;
	margin-top:0.5em;
 }
 
 .center{text-align:center}
 .fancy td{
	color:#f60;
	background:#666
 }
 td.fancy{
	color：#f60;
	background:#666;
}

body{
	background-image:url(huaban.png);
	background-repeat:no-repeat;
	background-attachment:fixed;
}
</style>
</head>

<body>
<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h2>This subhead is also red.</h2>
<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>

<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>

<p id="red">id选择器：red</p>
<p id="green">id选择器：green</p>

<p id="sidebar">sidebar paragraph</p>

<p class="center">类选择器：center</p>
<td class="fancy">派生选择器</td>

<p>图像不会随页面的其余部分滚动。</p>
<p>A</p>
<p>B</p>
<p>C</p>
<p>D</p>
<p>E</p>
<p>F</p>
<p>G</p>
<p>H</p>
<p>I</p>
<p>J</p>
<p>K</p>
<p>L</p>
<p>M</p>
<p>N</p>
<p>O</p>
<p>P</p>
<p>Q</p>
<p>R</p>
<p>S</p>
<p>T</p>
<p>W</p>
<p>X</p>
<p>Y</p>
<p>Z</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
</body>
</html>